<template> 
    <div>

        
        <el-submenu  :index="handleIndex(item2.id)" v-for="item2 in value" :key="item2.menuSort" v-if="item2.childList && item2.childList.length>0?true:false">
            <template slot="title"><a class="router"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.name}}</a></template>
           
            <tree  :value="item2.childList" :index="handleIndex(item2.id)"></tree>
        </el-submenu>
        <el-menu-item :index="handleIndex(item2.id)" :class='{ "is-active": item2.id === defaultActive}'  :key="item2.setid" v-else>
            
            <router-link v-if="item2.isnext" class="deptGroup router" :to="item2.menuUrl+'&target='+menuIndexFilter(item2.id)" :title="item2.descrshort"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.name}}</router-link>
            <router-link v-else class="router"  :to="handleUrl(item2)" :title="item2.name"><i class="fa" :class="item2.menuIconCls" aria-hidden="true"></i>{{item2.name}}</router-link>
        </el-menu-item> 
        
        

    </div> 
</template>
<script>
export default {
    name: 'tree',
    data () {
        return {
            deptGroup: true,
        }
    },

    methods: {
        handleUrl(item2){
            if (item2.menuUrl.indexOf('?')>-1) {
                return item2.menuUrl+'&type=' +item2.mark+'&target='+this.menuIndexFilter( item2.id,this.index )
            } else {
                return item2.menuUrl+'?type=' +item2.mark+'&target='+this.menuIndexFilter( item2.id,this.index)
            }      
        },
        handleSelect(id){
			
            console.log(this.defaultActive,'id');
            if (this.defaultActive === id) {
                return 'is-active';
            }
            
        },
        handleIndex:function(_index2){
            
            if (!this.index) {
                // console.log(_index2 + '','_index2');
                return _index2 + ''
            } else {
                //  console.log(this.index + '-' + _index2,'_index2');
                return  this.index + '-' + _index2;
            }
        },
        menuIndexFilter (_index, _index2) {
            if (!_index2) {
                return "" + _index;
            }
            return _index2 + "-" + _index;
        },
        FilterNull: function (type) {
            return type ? type : '';
        },
        getChildrenList: function (item) {
            if (item.setid === 'CM666') {
                this.$router.push("/keyEmpployeeTree");
                return;
            }
            var setid = item.setid === 'CM777' ? "" : item.setid;
            this.$router.push("/Group");
            // this.Axios.StringPost(this.URL.getDeptparentBylist.url ,{setid:setid,parent_deptid:parent_deptid},true).then(function(res){
            //     console.log(item,'getChildrenList');
            //     item.childList = res.data.datas.deptmune;

            // })
        }
    },
    computed:{
        classObj: function () {
			return {
				
			}
        },
    },
    props: {
        value:{
           
        },
        index:{
            type : String,
            default:'',
        },
        defaultActive:{
            type : String,
            default:''
        }
    },
    mounted: function () {

    }
}
</script>
<style scoped>
.sidebar .fa {
  width: 20px;
}
.big-slider .router {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-left: -25px;
  padding: 0px 45px 0px 25px;
}
</style>
<style>
.barBox
  > .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-submenu
  > .el-submenu__title {
  padding-left: 20px !important;
}
.barBox
  > .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-submenu
  > .el-submenu__title {
  padding-left: 20px !important;
}
.barBox
  > .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-menu-item {
  padding-left: 25px !important;
}
.barBox
  > .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-submenu
  .el-menu
  > div
  > .el-menu-item {
  padding-left: 30px !important;
}
.is-active .deptGroup {
  background-color: #f7fbfc;
}
</style>


